<template>
  <div class="login-page">
    <a-row>
      <a-col :span="12" class="aside">
        <div class="aside-inner">
          <router-link to="/">
            <img
              alt="乐高编辑器"
              src="http://lego-express.oss-cn-shanghai.aliyuncs.com/express-test/94aec4db-ab4f-4701-83fb-4208d54f709a/lego-bk.jpg"
              class="logo-img"
            />
          </router-link>
          <h2>这是我用过的最好的建站工具</h2>
          <span class="text-white-70">王铁锤, Google</span>
        </div>
      </a-col>
      <a-col :span="12" class="login-area">
        <a-form
          layout="vertical"
          ref="loginForm"
          :model="userInfo"
          :rules="rules"
        >
          <h2>欢迎回来</h2>
          <p class="subTitle">使用邮箱和密码登录到慕课乐高</p>
          <a-form-item name="username">
            <a-input
              placeholder="邮箱"
              size="large"
              v-model:value="userInfo.username"
            >
              <template v-slot:prefix
                ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
              /></template>
            </a-input>
          </a-form-item>
          <a-form-item name="password">
            <a-input
              placeholder="密码"
              size="large"
              v-model:value="userInfo.password"
            >
              <template v-slot:prefix
                ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
              /></template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              size="large"
              @click="loginHandle"
              :loading="isLoading"
            >
              登录
            </a-button>
            <a-button
              size="large"
              :style="{ marginLeft: '20px' }"
              @click="openViewHandler"
            >
              使用Gitee登录
            </a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs } from 'vue'
import useUserStore from '@/store/modules/UserStore'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import useGlobalStore from '@/store/modules/globalStore'
const userStore = useUserStore()
const { isLoading } = toRefs(useGlobalStore())

const router = useRouter()
onMounted(() => {
  handlerOpenOauth()
})
interface IUser {
  username: string
  password: string | number
}
const loadingBtn = ref(false)
const loginForm = ref()
const userInfo = ref<IUser>({
  username: '',
  password: '',
})
if (import.meta.env.MODE === 'development') {
  userInfo.value.username = '313@qq.com'
  userInfo.value.password = '123456'
}
const rules = {
  username: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {
      type: 'email',
      message: '请输入正确的邮箱',
      trigger: 'blur',
    },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      min: 6,
      max: 18,
      message: '密码长度在6到18位之间',
      trigger: 'blur',
    },
  ],
}
/**TODO: 等上传到服务器时，后端需要向前端部署的地址发送postMessage事件将token准确的发送到前端 */
const openViewHandler = () => {
  window.open('http://114.55.1.185:3000/api/user/loginByoauth', '_blank')
}
const handlerOpenOauth = () => {
  window.addEventListener('message', async (e) => {
    if (e.origin !== 'http://114.55.1.185:3000') return
    //登录
    const { data } = e
    userStore.setToken(data)
    await userStore.getUserInfo()
    message.success('登录成功,2秒后跳转首页')
    setTimeout(() => {
      router.push('/')
    }, 2000)
  })
}

const loginHandle = async () => {
  try {
    await loginForm.value.validate()
    loadingBtn.value = true
    await userStore.login(userInfo.value)
    message.success('登录成功')
    loginForm.value.resetFields()
    loadingBtn.value = false
    router.push('/')
  } catch (error) {
    loadingBtn.value = false
  }
}
</script>

<style scoped>
.logo-area {
  position: absolute;
  top: 30px;
  width: 150px;
}
.aside {
  height: 100vh;
  background-color: #1a1919;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('http://lego-express.oss-cn-shanghai.aliyuncs.com/express-test/2ccc8964-b487-4f7a-b7f3-076f9d205dc3/login.png');
  background-size: cover;
}
.aside .logo-img {
  width: 200px;
  margin-bottom: 20px;
}
.aside h2 {
  color: #cccccc;
  font-size: 29px;
}
.aside-inner {
  width: 60%;
  text-align: center;
}
.login-area {
  height: 100vh;
}
.login-area .ant-form {
  width: 350px;
}
.text-white-70 {
  color: #999;
  display: block;
  font-size: 19px;
  margin-top: 20px;
}
.aside,
.login-area {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.login-area h2 {
  color: #333333;
  font-size: 29px;
}
.login-area .subTitle {
  color: #666666;
  font-size: 19px;
}
.login-area .ant-form-item-label {
  display: none;
}
.login-area .ant-input-prefix {
  left: auto;
  right: 30px;
  font-size: 19px;
}
.login-area .ant-input {
  font-size: 17px;
  padding: 20px 45px 20px 30px;
}
</style>
